// 登录注册
const on = document.querySelector('.on')
const off = document.querySelector('.off')
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
if (!id) {
    on.classList.remove('active')
    off.classList.add('active')
}
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 401) {
        on.classList.remove('active')
        off.classList.add('active')
    }
    if (res.code === 1) {
        // console.log(res.info)
        on.firstElementChild.innerText = res.info.nickname
        off.classList.remove('active')
        on.classList.add('active')
    }
}
xhr.setRequestHeader('authorization', token)
xhr.send()







const imgBox = document.querySelector('.imgBox')
const banner = document.querySelector('.banner')
const pointBox = document.querySelector('.pointBox')


const banner_width = banner.clientWidth
let index = 1
let timer = 0
let flag = true


// 1

function copyEle() {
    const first = imgBox.firstElementChild.cloneNode(true)
    const last = imgBox.lastElementChild.cloneNode(true)
    imgBox.appendChild(first)
    imgBox.insertBefore(last, imgBox.firstElementChild)
    imgBox.style.width = imgBox.children.length * 100 + '%'
    imgBox.style.left = -banner_width + 'px'
}
copyEle()


// 2

function setPoint() {
    const pointNum = imgBox.children.length - 2
    for (var i = 0; i < pointNum; i++) {
        const li = document.createElement('li')
        if (i === 0) li.className = 'active'
        li.classList.add('item')
        li.dataset.point = i
        pointBox.appendChild(li)
    }
    pointBox.style.width = pointNum * (20 + 10) + 'px'
}
setPoint()


// 3

function autoPlay() {
    timer = setInterval(() => {
        index++
        move(imgBox, { left: -index * banner_width }, moveEnd)
    }, 2000)
}
autoPlay()


// 4



function moveEnd() {
    if (index === imgBox.children.length - 1) {
        index = 1
        imgBox.style.left = -index * banner_width + 'px'
    }
    if (index === 0) {
        index = imgBox.children.length - 2
        imgBox.style.left = -index * banner_width + 'px'
    }
    for (let i = 0; i < pointBox.children.length; i++) {
        pointBox.children[i].classList.remove('active')
    }
    pointBox.children[index - 1].classList.add('active')
    flag = true
}
moveEnd()


// 5



function overOut() {
    banner.addEventListener('mouseover', () => clearInterval(timer))
    banner.addEventListener('mouseout', () => autoPlay())
}
overOut()



// 6




function bindEvent() {
    banner.addEventListener('click', e => {
        if (e.target.className === 'left') {
            if (flag === false) return
            flag = false
            index--
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }

        if (e.target.className === 'right') {
            if (flag === false) return
            flag = false
            index++
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }
        if (e.target.className === 'item') {
            if (flag === false) return
            flag = false
            index = e.target.dataset.point - 0 + 1
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }

    })
}
bindEvent()





function changeTab() {
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') clearInterval(timer)
        if (document.visibilityState === 'visible') autoPlay()
    })
}
changeTab()








const pro = document.querySelector('.main>.contain>.pro>ul')
getPro()
async function getPro() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    // console.log(res)
    bindPro(res.data.floors.slice(4, 5)[0].data.list)
}
function bindPro(list) {
    list.forEach((item, index) => {
        // console.log(item)
        const str = `
        <li data-id="${item.itemId}">
        <p>${item.label}</p>
        <img src="${item.pic}">
        <p>${item.title}</p>
        <p>${item.desc}</p>
        <span>￥${item.currentPrice}</span>  
        <span>￥${item.originPrice}</span> 
        </li>       
        `
        pro.innerHTML += str
    })
}



pro.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})



const maches = document.querySelector('.main>.contain>.mach>ul')
// console.log(maches)
getMaches()
async function getMaches() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    console.log(res)
    bindMaches(res.data.floors.slice(6, 7)[0].data.list)
}
function bindMaches(list) {
    list.forEach((item, index) => {
        const str = `
        <li data-id="${item.itemId}">
           <p>${item.label}</p>
           <img src="${item.pic}">
           <p>${item.title}</p>
           <p>${item.desc}</p>
           <span>￥${item.currentPrice}</span>  
           <span>￥${item.originPrice}</span>  
        </li>     
        `
        maches.innerHTML += str
    })
}

maches.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})






const cares = document.querySelector('.main>.contain>.car>ul')
// console.log(cares)
getCares()
async function getCares() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    // console.log(res)
    bindCares(res.data.floors.slice(8, 9)[0].data.list)
}
function bindCares(list) {
    list.forEach((item, index) => {
        const str = `
        <li data-id="${item.itemId}">
        <p>${item.label}</p>
        <img src="${item.pic}">
        <p>${item.title}</p>
        <p>${item.desc}</p>
        <span>￥${item.currentPrice}</span>  
        <span>￥${item.originPrice}</span>  
        </li>
        `
        cares.innerHTML += str
    })
}



cares.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})


const safees = document.querySelector('.main>.contain>.safe>ul')
// console.log(safees)
getSafe()
async function getSafe() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    // console.log(res)
    bindSafe(res.data.floors.slice(10, 11)[0].data.list)
}
function bindSafe(list) {
    list.forEach((item, index) => {
        const str = `
        <li data-id="${item.itemId}">
        <p>${item.label}</p>
        <img src="${item.pic}">
        <p>${item.title}</p>
        <p>${item.desc}</p>
        <span>￥${item.currentPrice}</span>  
        <span>￥${item.originPrice}</span>  
        </li>
        `
        safees.innerHTML += str
    })
}

safees.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})


const smartes = document.querySelector('.main>.contain>.smart>ul')
// console.log(smartes)
getSmart()
async function getSmart() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    // console.log(res)
    bindSmart(res.data.floors.slice(12, 13)[0].data.list)
}
function bindSmart(list) {
    list.forEach((item, index) => {
        const str = `
        <li data-id="${item.itemId}">
        <p>${item.label}</p>
        <img src="${item.pic}">
        <p>${item.title}</p>
        <p>${item.desc}</p>
        <span>￥${item.currentPrice}</span>  
        <span>￥${item.originPrice}</span>   
        </li>      
        `
        smartes.innerHTML += str
    })
}



smartes.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})




const earses = document.querySelector('.main>.contain>.ears>ul')
// console.log(earses)
getEarses()
async function getEarses() {
    const res = await pAjax({ url: '/seven', dataType: 'json' })
    // console.log(res)
    bindEarses(res.data.floors.slice(14, 15)[0].data.list)
}
function bindEarses(list) {
    list.forEach((item, index) => {
        const str = `
        <li data-id="${item.itemId}">
        <p>${item.label}</p>
        <img src="${item.pic}">
        <p>${item.title}</p>
        <p>${item.desc}</p>
        <span>￥${item.currentPrice}</span>  
        <span>￥${item.originPrice}</span>  
        </li>    
        `
        earses.innerHTML += str
    })
}

earses.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        // console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})



const goods = document.querySelector('.main>.contain>.box3>ul')
// console.log(goods)
getGoods()
async function getGoods() {

    const res = await pAjax({ url: '/eight', dataType: 'json' })
    // console.log(res.data.list)
    bindGoods(res.data.list)
}
function bindGoods(list) {
    list.forEach((item) => {
        if (item.tagString) {
            const str = `
            <li data-id="${item.itemId}">
            <img src="${item.img}">
            <p>${item.title}</p>
            <span>￥${item.marketPrice}</span>
            <p>${item.tagString}</p> 
            </li>
            `
            goods.innerHTML += str
        } else {
            const str = `
            <li data-id="${item.itemId}">
            <img src="${item.img}">
            <p>${item.title}</p>
            <span>￥${item.marketPrice}</span>   
            </li>  
            `
            goods.innerHTML += str
        }

    })
}



getGoods2()
async function getGoods2() {
    let info = {
        page: 1,
        _: 1639385313698
    }
    const res = await pAjax({ url: '/eight', data: info, dataType: 'json' })
    // console.log(res.data.list)
    bindGoods2(res.data.list)
}
function bindGoods2(list) {
    list.forEach((item) => {
        if (item.tagString) {
            const str = `
            <li data-id="${item.itemId}">
            <img src="${item.img}">
            <p>${item.title}</p>
            <span>￥${item.marketPrice}</span>
            <p>${item.tagString}</p> 
        </li>
            `
            goods.innerHTML += str
        } else {
            const str = `
            <li data-id="${item.itemId}">
            <img src="${item.img}">
            <p>${item.title}</p>
            <span>￥${item.marketPrice}</span> 
            </li>    
            `
            goods.innerHTML += str
        }

    })
}





goods.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }
    
})






// 搜索引擎
const inp = document.querySelector('.logo>.contain>.right>.top>input')
const ul = document.querySelector('.logo>.contain>.right>.top>.u1')
inp.oninput = function () {
    const text = inp.value.trim()
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34443,35104,35237,35049,34584,34518,35234,34579,34606,34815,26350,35145,22159&wd=${text}&req=2&csor=1&cb=handler&_=1637892915435`
    document.body.appendChild(script)
    script.remove()
}
function handler(res) {
    if (!res.g) {
        ul.style.display = 'none'
        return
    }
    let str = ''
    res.g.forEach(item => {
        str += `
         <li>${item.q}</li>
        `
    })
    ul.style.display = 'block'
    ul.innerHTML = str
}



